<template>
	<view class="details">
		<xbd-pages-content title="title">
			<template #content>
				<view class="content" :style="'minHeight : ' + windowHeight + 'px;'">
					<view class="box">
						<view class="">
							<text>申请部门</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.apply_department_name}}</text>
						</view>
						<view class="icon">
							<image v-if="fromDate.apply_state==='已通过'" src="../../../static/images/meal/yes.svg"
								mode="">
							</image>
							<image v-else-if="fromDate.apply_state==='待审批'" src="../../../static/images/meal/stay.svg"
								mode="">
							</image>
							<image v-else-if="fromDate.apply_state==='已拒绝'" src="../../../static/images/meal/no.svg"
								mode="">
							</image>
							<image v-else-if="fromDate.apply_state==='审批中'"
								src="../../../static/images/meal/underway.png" mode=""></image>
							<image v-else-if="fromDate.apply_state==='已撤销'" src="../../../static/images/car/cancel.png"
								mode=""></image>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>乘车人数</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.apply_person_count}}</text>
						</view>
					</view>
					<!-- <view class="box">
						<view class="">
							<text>车辆类型</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.apply_car_tupe || '-'}} 座</text>
						</view>
					</view> -->
					<view class="box">
						<view class="">
							<text>目的地</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.apply_destination}}</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>行驶路线
							</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.remark || '-'}}</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>用车事由</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.apply_reason}}</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>用车时间</text>
						</view>
						<view class="">
							<view class="box_right date">
								<text>{{fromDate.apply_start_time | timeFormat('YYYY-MM-DD')}}</text>
								<text>{{fromDate.apply_start_time | timeFormat('HH:mm')}}</text>
							</view>
							<view class="box_tag">
								<text>至</text>
							</view>
							<view class="box_right date">
								<text>{{fromDate.apply_end_time | timeFormat('YYYY-MM-DD')}}</text>
								<text>{{fromDate.apply_end_time | timeFormat('HH:mm')}}</text>
							</view>
						</view>


					</view>
					<!-- <view class="box">
						<view class="">
							<text>是否自驾</text>
						</view>
						<view class="box_right">
							<text v-if="fromDate.is_self_drive ===1">是</text>
							<text v-else>否</text>
						</view>
					</view> -->
					<view class="box">
						<view class="">
							<text>用车范围</text>
						</view>
						<view class="box_right">
							<text v-if="fromDate.type===1">市内</text>
							<text v-else>市外</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>司机姓名</text>
						</view>
						<view v-if="fromDate.captain  && type === '2'" class="box_right">
							<xbd-select :carId.sync="fromDate.apply_driver_name" :visible.sync="visible"
								:infoList="typeArr" @selectCar="selectCar">
								<template>
									<view class="select" @click="visible = true">
										<view class="text">
											{{fromDate.apply_driver_name || '请选择驾驶员'}} </view>
										<image class="image" src="@/static/images/health/right.svg"
											mode="">
										</image>
									</view>
								</template>
							</xbd-select>
						</view>
						<view v-else class="box_right">
							<text>{{fromDate.apply_driver_name || '-'}}</text>
						</view>
						
					</view>
					<view class="box">
						<view class="">
							<text>车牌号码</text>
						</view>
						<view v-if="fromDate.captain  && type === '2'" class="box_right">
							<xbd-select :carId.sync="fromDate.apply_plate" :visible.sync="visible1"
								:infoList="typeArr2" @selectCar="selectCar2">
								<template>
									<view class="select" @click="visible1 = true">
										<view class="text">
											{{fromDate.apply_plate || '请选择车辆'}} </view>
										<image class="image" src="@/static/images/health/right.svg"
											mode="">
										</image>
									</view>
								</template>
							</xbd-select>
						</view>
						<view v-else class="box_right">
							<text>{{fromDate.apply_plate || '-'}}</text>
						</view>
						
					</view>


					<view class="line">
					</view>

					<view class="title">流程</view>
					<view class="flow">

						<view class="type" v-for="(item,index) in fromDate.apple_process" :key="index">
							<view class="left">
								<view class="radio">
								</view>
								<view class="line2">
								</view>
							</view>
							<view class="msg">
								<view class="msg_box">
									<view class="msg_tag">
										<view class="name">
											<text class="people">{{item.role}}：</text>
										</view>
										<view class="msg_type">
											<view>{{item.name}}</view>
											<view v-if="item.status==='拒绝'" class=" no">拒绝</view>
											<view v-if="item.status==='通过'" class=" yes">同意</view>
											<view class="date">{{item.time | timeFormat('MM-DD HH:mm')}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>

					</view>
					<view class="foot">
						<view
							v-if=" type === '2' &&  (fromDate.apply_state === '审批中' || fromDate.apply_state === '待审批') "
							class="btns">
							<button class="draft" @click="draft">拒绝审批</button>
							<button class="upload" @click="pass">审批通过</button>
						</view>
						<view v-if="type === '1' && fromDate.apply_state === '待审批'" class="btns">
							<button class="revocation" @click="revocation">撤销申请</button>
						</view>
					</view>
					<xbd-popup :isShow="showDialog" @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel'>
						<template>
							<view class="draft_reason">
								<text>拒绝审批</text>
								<view class="draft_type">确定拒绝审批申请单？</view>
							</view>
						</template>
					</xbd-popup>
					<!-- <xbd-popup :isShow="showDialog" @dialogConfirm="dialogConfirm" @dialogCancel="dialogCancel"
						content="确定拒绝审批申请单？" cancelText="取消" confirmText="确定">
					</xbd-popup> -->

				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		UseCar
	} from '@/api/index.js';
	export default {
		data() {

			return {
				flag: true,
				id: '',
				title: '',
				visible1:false,
				visible:false,
				type: '',
				showDialog: false,
				showDialog2: false,
				islender: true,
				draftResone: '',
				typeArr: [],
				typeArr2: [],
				department: [],
				fromDate: {
					apply_driver_name:'',
					apply_plate:''
				},
				info: {
					id: '',
					state: '',
					emp_id: '',
					car_base_id: ''
				},
				option: { //传参控制页面审批提示
					title: "我的审批",
					pass: true,
					msg: ""
				},
				carInfo:{
					start_time:'',
					end_time:'',
					page:1,
					perpage:100,
				}
			}
		},
		methods: {
			selectCar(e){
				this.info.emp_id = e.value
				console.log(e)
			},
			selectCar2(e){
				this.info.car_base_id = e.value
				console.log(this.fromDate.apply_plate,'fromDate.apply_plate')
				console.log(e)
			},
			dialogConfirm() {
				this.showDialog = false;
				this.option.msg = "审批拒绝"
				this.option.pass = false
				this.refus()
				console.log("确认")
			},
			dialogCancel() {
				console.log("取消")
				this.showDialog = false;
			},

			draft() {
				this.showDialog = true;
			},

			pass() {
				// this.showDialog2=true
				if(this.fromDate.captain){
					if(this.info.emp_id.length ===0){
						this.$showToast('请选择司机');
					}else if(this.info.car_base_id.length === 0){
						this.$showToast('请选择驾驶车辆');
					}else{
						this.option.msg = "审批通过"
						this.passed()
					}
				}else{
					this.option.msg = "审批通过"
					this.passed()
				}
				console.log(this.info)
				
			},

			// 初始化表单
			async init() {
				const id = this.id
				try {
					this.$showLoading('加载中');
					const res = await UseCar.getDetails(this.id);
					console.log(res)
					uni.hideLoading();
					this.fromDate = res.data;
					console.log(this.fromDate, 'this.fromDate')
					this.fromDate.apple_process.forEach(item => {
						console.log(item.name, 'item.name')
						if (!item.name.length) {
							this.department.push(item.role)
						}
					})
					this.carInfo.start_time = this.fromDate.apply_start_time
					this.carInfo.end_time = this.fromDate.apply_end_time
					this.carList()
					this.carDriver()
				} catch (e) {
					console.log(e)
					uni.hideLoading();
				}
			},
			// 获取车辆列表
			async carList(){
				console.log('获取车辆列表')
				try{
					const res = await UseCar.getVehicle()
					console.log(res,'getVehicle')
					this.typeArr2 = res.data.map(item=>{
						let o={
							label: item.license_plate,
							value: item.car_base_id
						}
					 	return o
					})
				}catch(e){
					//TODO handle the exception
				}
			},
			// 获取司机列表
			async carDriver(){
				console.log('获取司机列表')
				try{
					const res = await UseCar.getDriver()
					this.typeArr = res.data.map(item=>{
						let o={
							label: item.applicant_name,
							value: item.emp_id
						}
					 	return o
					})
					console.log(this.typeArr,'this.typeArr')
				}catch(e){
					//TODO handle the exception
				}
			},
			// 拒绝申请
			async refus() {
				
				this.info.state = '拒绝'
				if (this.flag) {
					try {
						this.flag = false
						this.$showLoading('加载中');
						const res = await UseCar.putApproval(this.info);
						console.log(res,'res')
						uni.hideLoading();
						// code=9527 校验避免同时审批
						if (!res.success) {
							this.flag=true
							this.$showToast(res.msg);
							// this.getState()
						} else {
							// this.flag=true
							// // uni.$emit('refresh');
							// uni.redirectTo({
							// 	url: `../../status/status?option=${JSON.stringify(this.option)}`
							// });
							if(res.code===9527){
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
								uni.navigateBack({
									delta: 1
								});
							}else{
								uni.redirectTo({
									url: `../../status/status?option=${JSON.stringify(this.option)}`
								});
							}
							
						}
					} catch (e) {
						uni.hideLoading();
						console.log(e);
					}
				}
			},
			// 审批通过
			async passed() {
				this.info.state = '通过'
				if (this.flag) {
					try {
						this.flag = false
						this.$showLoading('加载中');
						const res = await UseCar.putApproval(this.info);
						console.log(res,'res')
						uni.hideLoading();
						// code=9527 校验避免同时审批
						if (!res.success) {
							this.flag=true
							this.$showToast(res.msg);
						} else {
							if(res.code===9527){
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
								uni.navigateBack({
									delta: 1
								});
							}else{
								uni.redirectTo({
									url: `../../status/status?option=${JSON.stringify(this.option)}`
								});
							}
						}
					} catch (e) {
						uni.hideLoading();
						console.log(e);
					}
				}
			},
			// 撤销申请
			async revocation() {
				console.log('撤销申请')
				this.option.msg = "撤销成功"
				this.option.title = '我的申请'
				if (this.flag) {
					try {
						this.flag = false
						this.$showLoading('加载中');
						const res = await UseCar.putRevocation(this.id);
						uni.hideLoading();
						// code=9527 校验避免同时审批
						console.log(res,'res')
						if (!res.success) {
							this.flag = true
							this.$showToast(res.msg);
						} else {
							if(res.code===9527){
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
								uni.navigateBack({
									delta: 1
								});
							}else{
								uni.redirectTo({
									url: `../../status/status?option=${JSON.stringify(this.option)}`
								});
							}
							
						}

					} catch (e) {
						uni.hideLoading();
						console.log(e);
					}
				}
			},
		},
		computed: {
			...mapState(['windowHeight'])
		},
		onLoad(res) {
			this.id = res.id
			this.info.id = res.id
			this.type = res.msg
			this.title = res.title
			uni.setNavigationBarTitle({
				title: this.title
			});
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .draft:after {
		border: none;
	}

	.content {
		padding: 30px 50rpx;
		font-size: 32rpx;

		.box {
			position: relative;
			display: flex;
			justify-content: space-between;
			margin-bottom: 30px;

			.box_right {
				box-sizing: border-box;
				padding-top: 4rpx;
				font-size: 28rpx;
				width: 420rpx;
				word-wrap: break-word;
			}

			.box_tag {
				margin: 20px 0;
			}

			.date {
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding-right: 100rpx;
			}

			.icon {
				position: absolute;
				top: -10px;
				right: 0;

				image {
					width: 150rpx;
					height: 150rpx;
				}

			}
		}



		.line {
			border-bottom: 1px solid #eaeaea;
			margin-bottom: 15px;
		}

		.title {
			font-size: 32rpx;
			color: #194769;
			font-weight: 900;
			margin-bottom: 20px;
		}

		.flow {
			.type:last-child {
				.line2 {
					height: 0 !important;
				}
			}
		}

		.type {
			position: relative;
			display: flex;

			.radio {
				width: 20rpx;
				height: 20rpx;
				background-color: #FAC52A;
				border-radius: 10rpx;
			}

			.line2 {
				width: 2rpx;
				height: 50px;
				background-color: #FAC52A;
				margin-left: 9rpx;
			}

			.msg {
				.reason {
					word-break: break-all;
					margin-top: 30rpx;
					margin-left: 20rpx;
					color: #999999;
				}
			}

			.msg_box {
				position: absolute;
				width: 610rpx;
				top: -5px;
				left: 40rpx;
				font-size: 32rpx;
				display: flex;
				color: #999999;

				.msg_tag {
					.msg_type {
						width: 610rpx;
						margin-top: 10rpx;
						display: flex;
						justify-content: space-between;
					}

					.name {
						margin-right: 40rpx;

						.people {
							font-size: 32rpx;
							color: #194769;
						}
					}

					.no {
						color: #FF7543;
					}

					.yes {
						color: #39D4D1;
					}

				}

				.date {
					font-size: 28rpx;

					text {
						margin-left: 20rpx;
					}
				}
			}

		}

		.items {
			box-sizing: border-box;
			padding-left: 40rpx;

			.items_msg {
				display: flex;
				justify-content: space-between;
				// background-color: red;
				margin-bottom: 30px;

				.items_tag {
					width: 140rpx;
				}

				.items_tag2 {
					width: 60rpx;
					margin-left: -40rpx;
					margin-right: 120rpx;
				}
			}

		}

		.guest {
			font-size: 32rpx;

			.guest_conter {
				padding-left: 40rpx;
			}

			.guest_msg {
				box-sizing: border-box;
				padding-top: 4rpx;
				margin-left: 40rpx;
				font-size: 28rpx;
				color: #222222;
			}

			.type {
				margin-bottom: 25px;
				margin-right: 40rpx;
			}
		}

		.foot {
			margin-top: 60px;
			box-sizing: border-box;
			padding: 20upx 4upx;

			.btns {
				display: flex;
				justify-content: space-between;

				button {
					width: 300rpx;
					height: 30px;
					line-height: 30px;
					font-size: 28rpx;
					box-sizing: border-box;
				}

				.draft {
					color: #FFFFFF;
					margin-right: 50rpx;
					background: url(../../../static/images/meal/gary.png) no-repeat;
					background-size: 100% 100%;
				}

				.upload {
					background: url(../../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: $uni-text-color-inverse;
				}

				.revocation {
					background: url(../../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: $uni-text-color-inverse;
					margin-left: 180rpx;
				}
			}
		}

	}
	.draft_reason{
		.draft_type{
			margin: 20rpx 0 40rpx;
		}
	}
	.select {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 370rpx;

				height: 28px;
				line-height: 28px;
				border-radius: 8rpx;
				border: 1px solid #999999;
				box-sizing: border-box;
				padding: 0 20rpx 0 20rpx;
				// color: #BBC0C9 !important;

				.text {
					flex: 1;
					text-align: center;

				}
				.prColor {
					color: #BBC0C9 !important;
				}
				.image {
					transform: rotate(90deg);
					width: 38rpx;
					height: 38rpx;
				}
			}
</style>
